<template>
	<view class="page">
		<!-- 头部背景图 -->
		<view class="pageTopImg" :style="'padding-top:' + touHeight + 'px'"></view>
		<!-- 顶部菜单 -->
		<view class="topHeader" :style="'height:' + touHeight +'px;'">
			<view class="fanhuiUp" @tap="toFanhuiUp"></view>
			<view class="pageTitle">更换绑定手机号</view>
		</view>
		<view class="page_content" :style="'padding-top:' + touHeight + 'px'">
			<form @submit="submitForm" class="submitForm">
				<view class="input_list">
					<view class="name">手机号码</view>
					<input type="number" name="phone" class="text_left" :value="phone" @input="formPhone" placeholder-class="phcolor" placeholder="请输入手机号码"/>
				</view>
				<view class="input_list" style="margin-top: 0px;">
					<view class="name">验证码</view>
					<input type="number" name="code" class="text_left" :value="code" @input="formCode" placeholder-class="phcolor" placeholder="请填写验证码"/>
					<view class="codebox">
						<view class='getcode' @tap='getCode' :class="{'active':isGet==false}">获取验证码</view>
						<view class='getcode' :class="{'active':isGet==true}">{{sec}}秒</view>
					</view>
				</view>
				<button type="primary" form-type="submit" class="public_btn public_btn03">确认绑定</button>
			</form>
		</view>
	</view>
</template>

<script>
	const app = getApp()
	import WxValidate from '@/WxValidate.js';
	export default {
		data() {
			return {
				//域名拼接
				URL: app.globalData.URL,
				touHeight: 0,
				isGet: false,
				sec: 60,
				phone: '',
				code: ''
			}
		},
		
		onLoad(options){
			var that = this;
			//自定义头部高度
			app.customNav()
			that.touHeight = app.touHeight + 5//搜索栏距离顶部高度
			//表单验证
			that.initValidate()
		},
		methods: {
			//返回上一级
			toFanhuiUp:function(){
				uni.navigateBack({
				    delta: 1
				})
			},
			
			initValidate() {
				var that = this;
				// 验证字段的规则
				const rules = {
					phone:{
						required: true,
						tel: true,
					},
					code:{
						required: true,
					}
				}
				// 验证字段的提示信息，若不传则调用默认的信息
				const messages = {
					phone:{
						required: '请填写手机号码',
						tel: '请填写正确的手机号',
					},
					code:{
						required: '请填写验证码',
					}
				}
				// 创建实例对象
				that.WxValidate = new WxValidate(rules, messages)
			},
			
			//表单验证
			showModal(error) {
				uni.showModal({
					content: error.msg,
					showCancel: false,
				})
			},
			
			//手机号实时监控
			formPhone:function(e){
				var that = this;
				that.valuePhone = e.detail.value;
			},
			
			//验证码实时监控
			formCode:function(e){
				var that = this;
				that.valueCode = e.detail.value;
			},
			
			//提现效果
			submitForm(e) {
				var that = this;
				const params = e.detail.value;
				// 传入表单数据，调用验证方法
				if (!that.WxValidate.checkForm(params)){
					const error = that.WxValidate.errorList[0]
					that.showModal(error)
					return false
				}
				
				//实名认证表单提交
				uni.request({
					url: app.globalData.URL + '/api/v1/User/setPhone?mobile='+that.valuePhone+'&captcha='+that.valueCode,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						if(res.data.code==0){
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#93533E',
							})
						}else{
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#93533E',
								success(res){
									uni.navigateBack({
									    delta: 1
									})
								}
							})
						}
						
					}
				})
			},
			
			// 获取验证码
			getCode(){
				var that= this
				//请求验证码接口
				uni.request({
					url: app.globalData.URL + '/api/v1/User/sendSms?mobile='+that.valuePhone,
					method: "get",
					header:{
						token: uni.getStorageSync('token')
					},
					success: function (res) {
						if(res.data.code==1){
							that.isGet = true
							var remain = 60;
							var time = setInterval(function () {
								if (remain == 1) {
									clearInterval(time)
									that.sec = 60
									that.isGet = false
									return false
								}
								remain--;
								that.sec = remain
							}, 1000)
						}else{
							wx.showModal({
								content: res.data.msg,
								showCancel: false,
								confirmColor:'#E85426'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.page_content{
		padding: 0px;
	}
</style>
